<template>
	<!--Card 卡片标签-->
	<el-card class="box-card">
		<div slot="header" class="clearfix">	
			<span>总合：</span>
			<el-button @click="addCostdialogVisible = true" style="float: right; padding: 3px 0" type="text">添加记录</el-button>
		</div>
		<el-table :data="costList" border style="width: 100%" >
			<el-table-column prop="costId" label="序号" width="100"></el-table-column>
			<!-- $moment().format('YYYY年MM月DD日') -- 只展现年月日 -->
			<el-table-column prop="costData" label="日期" width="180">{{$moment().format('YYYY年MM月DD日')}}</el-table-column>
			<el-table-column prop="costMoney" label="金额" width="180"></el-table-column>
			<el-table-column prop="costUse" label="用途"></el-table-column>
			<el-table-column prop="operation" label="操作" width="150">
				<template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" size="small"
                @click="updateCostBtn(scope.row)"></el-button>
                <el-button type="danger" icon="el-icon-delete" size="small"
                @click="deleteCost(scope.row)"></el-button>
            </template>
			</el-table-column>
		</el-table>

		<el-dialog title="添加记录" :visible.sync="addCostdialogVisible" width="30%" :before-close="handleClose">
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item   label="日期" prop="costData">
					<el-date-picker v-model="form.costData" type="date" placeholder="选择日期">
					</el-date-picker>
				</el-form-item>

				<el-form-item label="金额" prop="costMoney">
					<el-input v-model="form.costMoney"></el-input>
				</el-form-item>
				<el-form-item label="用途" prop="costUse">
					<el-input  v-model="form.costUse" type="textarea" ></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addCostdialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addCostBtu">确 定</el-button>
		</span>
		</el-dialog>
		
		<el-dialog title="修改记录" :visible.sync="updateCostdialogVisible" width="30%" :before-close="handleClose">
			<el-form ref="form" :model="updateCostModel" label-width="80px">
				<el-form-item   label="日期" prop="costData">
					<el-date-picker v-model="updateCostModel.costData" type="date"	placeholder="选择日期">
						</el-date-picker>
				</el-form-item>

				<el-form-item label="金额" prop="costMoney">
					<el-input v-model="updateCostModel.costMoney"></el-input>
				</el-form-item>
				<el-form-item label="用途"  prop="costUse">
					<el-input  v-model="updateCostModel.costUse" type="textarea" ></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="updateCostdialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="updateCost">确 定</el-button>
			</span>
		</el-dialog>
		
		<div class="block" style="float: left;">
			<span class="demonstration"></span>
			<el-pagination @size-change="handleSizeChange" 
				@current-change="handleCurrentChange"
				:current-page="currentPage4"
				:page-sizes="[10, 20, 30, 40]"
				:page-size="100"
				layout="total, sizes, prev, pager, next, jumper"
				:total="40">
				</el-pagination>
			</div>
		
	</el-card>
	
	

</template>

<script>
	export default {
		data() {
			return {
				costList:[],
				form: {
					costData:'',
					costMoney:'',
					costUse:''
				
				},

				CostData: '',
				addCostdialogVisible: false,
				updateCostdialogVisible: false,
				currentPage4: 4,
				updateCostModel:{
					
				}
			};
		},
		created(){
			this.getCostList()
		},
		methods: {
			async updateCostBtn(cost){
				this.updateCostdialogVisible = true
				const {data: result} = await this.$http.get("/cost/"+cost.costId)
				if(result.status !== 200) return this.$message.error("列表查询失败")
        		//如果程序执行成功,则将查询得到的User对象赋值给Vue中的属性
				this.updateCostModel = result.data
				console.log(this.updateCostModel)
		},
			
			async updateCost(){
				this.updateCostdialogVisible = true
           //根据接口文档要求封装数据
			let cost = {}
			cost.costId=this.updateCostModel.costId
			cost.costData = this.updateCostModel.costData
			cost.costMoney = this.updateCostModel.costMoney
			cost.costUse = this.updateCostModel.costUse
			const {data: result} = await this.$http.put("/cost/updateCost",cost)
			if(result.status !== 200) return this.$message.error("用户修改失败")
			this.$message.success("用户更新成功")
			this.updateCostdialogVisible = false
			this.getCostList()

		},

			async getCostList(){
				const {data: result} = await this.$http.get('/cost/getCost')
				if(result.status !== 200) return this.$message.error("列表查询失败")

				this.costList = result.data
				console.log(this.costList)
			},
			async addCostBtu(){
				console.log(this.form)
				const {data: result} = await this.$http.post('/cost/addCost',this.form)
				if(result.status !== 200) return this.$message.error("新增记录失败")
				this.getCostList()
				this.addCostdialogVisible = false
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			
			 //如果调用分页的结构,则会自动的传递pageSize数据..
	handleSizeChange(pageSize){
        console.log("每页展现的条数"+pageSize)
        this.queryInfo.pageSize = pageSize
        this.getUserList()
	},
      //根据用户的页数重新查询数据库.
	handleCurrentChange(pageNum){
        console.log("页数:"+pageNum)
        this.queryInfo.pageNum = pageNum
        this.getUserList()
	},

			
		async deleteCost(cost) {
			const result=await this.$confirm('此操作将永久删除第'+cost.costId+'条记录, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
        }).catch(error => error)  //接收error参数,并且返回error
         //确定: confirm  取消: cancel
        //console.log(result)

         //如果确认  confirm  如果取消 cancel
		if(result !== 'confirm'){
            //如果程序点击取消,则终止代码
            return this.$message.info("删除取消")
        }
        const {data: result2} = await this.$http.delete("/cost/"+cost.costId)
        if(result2.status !== 200) return this.$message.error("删除失败")
        this.$message.success("删除成功")
         //重新加载 数据
        this.getCostList()
    },

			
			
	}
		
	}
</script>

<style lang="less" scoped>
	.text {
		font-size: 14px;
		
	}
	
	.item {
		margin-bottom: 18px;
	}
	
	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
		
	}
	
	.clearfix:after {
		clear: both
	}
	
	.box-card {
		width: 800px;
		margin: 0px auto;
	}
	
	
		
		
</style>